<template>
  <div class="treatment-record">
    <el-row :gutter="20">
      <el-col :span="12">
        <AElForm :data="form" :rows="2" />
      </el-col>
      <el-col :span="12"><el-button type="primary">搜索</el-button></el-col>
    </el-row>
    <AElTable :data="tableData" :columns="columns">
      <AElPagination slot="pagination" :pageSize="pageSize" @change="change" />
    </AElTable>
  </div>
</template>

<script>
export default {
  name: 'TreatmentRecord',
  data() {
    return {
      form: {},
      columns: [],
      tableData: [],
      pageSize: { page: 1, size: 10, total: 0 }
    }
  },
  created() {
    this.setForm();
    this.setColumns();
    this.getData();
  },
  methods: {
    setForm() {
      this.form = {
        hz: {
          label: "患者姓名",
          clearable: true
        },
        zlsj: {
          label: "治疗时间",
          type: "date"
        }
      }
    },
    setColumns() {
      this.columns = [
        { label: "序号", type: "index" },
        { label: "患者姓名", prop: "xm" },
        { label: "治疗时间", prop: "zlsj" },
        {
          label: "治疗次数", prop: "zlcs",
          formatter: ({ zlcs = '1' }) => {
            return `第${zlcs}次`
          }
        },
        {
          label: "疗程次数", prop: "lccs"
        },
        {
          label: "操作",
          render: () => {
            return <el-button type="text">查看评估表</el-button>
          }
        },
      ]
    },
    getData() {
      this.tableData = [
        { xm: "迪迦奥特曼", zlsj: "2025-02-23", zlcs: "3", lccs: "3" },
        { xm: "迪迦奥特曼", zlsj: "2025-02-23", zlcs: "2", lccs: "3" },
        { xm: "迪迦奥特曼", zlsj: "2025-02-23", zlcs: "1", lccs: "3" },
      ]
    },
    change(data) {
      this.pageSize = { ...this.pageSize, ...data };
    }
  }
}
</script>

<style lang="scss" scoped>
.treatment-record {
  padding: 20px;
}
</style>
